<%@ page contentType="text/html; charset=UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="<%=basePath%>" />
<title>一起好</title>
<link rel="stylesheet"
	href="css/font-awesome.min.${style}">
<link rel="stylesheet" href="css/preview_login.${style}">
<link rel="stylesheet" href="css/google-font.${style}">
<script src="js/template1/behavior.js"></script>
</head>
<body class="eternity-form scroll-animations-activated">
	  <section class="colorBg5 colorBg dark" id="demo5" data-panel="fifth">
        <div class=" container">
            <br />
            <br />
            <div class="registration-form-section">
                <form>
                    <div class="section-title reg-header " data-animation="fadeInDown">
                        <h3>Get your Account Here </h3>

                    </div>
                    <div class="clearfix">
                        <div class="col-sm-6 registration-left-section  " data-animation="fadeInUp">
                            <div class="reg-content">
                                <div class="textbox-wrap">
                                    <div class="input-group">
                                        <span class="input-group-addon "><i class="icon-user icon-color"></i></span>
                                        <input type="text" class="form-control " placeholder="FirstName" required="required" />
                                    </div>
                                </div>
                                <div class="textbox-wrap">
                                    <div class="input-group">
                                        <span class="input-group-addon "><i class="icon-user icon-color"></i></span>
                                        <input type="text" class="form-control " placeholder="LastName" required="required" />
                                    </div>
                                </div>
                                <div class="textbox-wrap">
                                    <div class="input-group">
                                        <span class="input-group-addon "><i class="icon-envelope icon-color"></i></span>
                                        <input type="email" class="form-control " placeholder="Email Id" required="required" />
                                    </div>
                                </div>


                            </div>
                        </div>
                        <div class="col-sm-6 registration-right-section " data-animation="fadeInUp">
                            <div class="reg-content">
                                <div class="textbox-wrap">
                                    <div class="input-group">
                                        <span class="input-group-addon "><i class="icon-user icon-color"></i></span>
                                        <input type="text" class="form-control " placeholder="UserName" required="required" />
                                    </div>
                                </div>
                                <div class="textbox-wrap">
                                    <div class="input-group">
                                        <span class="input-group-addon "><i class="icon-key icon-color"></i></span>
                                        <input type="password" class="form-control " placeholder="Password" required="required" />
                                    </div>
                                </div>
                                <div class="textbox-wrap">
                                    <div class="input-group">
                                        <span class="input-group-addon "><i class="icon-key icon-color"></i></span>
                                        <input type="password" class="form-control " placeholder="Confirm-Password" required="required" />
                                    </div>
                                </div>


                            </div>
                        </div>
                    </div>
                    <div class="registration-form-action clearfix " data-animation="fadeInUp" data-animation-delay=".15s">
                        <a href="#demo4" class="btn btn-success pull-left blue-btn ">
                            <i class="icon-chevron-left"></i>&nbsp; &nbsp;Back To Login  
                        </a>
                        <button type="submit" class="btn btn-success pull-right green-btn ">Register Now &nbsp; <i class="icon-chevron-right"></i></button>

                    </div>
                </form>
            </div>



        </div>
    </section>


	<script src="js/template1/jquery.icheck.js"></script>

	<script type="text/javascript">
		$(function() {
			$("input").iCheck({
				checkboxClass : 'icheckbox_square-blue',
				increaseArea : '20%' // optional
			});
			$(".dark input").iCheck({
				checkboxClass : 'icheckbox_polaris',
				increaseArea : '20%' // optional
			});
			$(".form-control").focus(function() {
				$(this).closest(".textbox-wrap").addClass("focused");
			}).blur(function() {
				$(this).closest(".textbox-wrap").removeClass("focused");
			});

			//On Scroll Animations

			if ($(window).width() >= 968 && !Modernizr.touch
					&& Modernizr.${style}animations) {

				$("body").addClass("scroll-animations-activated");
				$('[data-animation-delay]').each(function() {
					var animationDelay = $(this).data("animation-delay");
					$(this).${style}({
						"-webkit-animation-delay" : animationDelay,
						"-moz-animation-delay" : animationDelay,
						"-o-animation-delay" : animationDelay,
						"-ms-animation-delay" : animationDelay,
						"animation-delay" : animationDelay
					});

				});
				$('[data-animation]').waypoint(
						function(direction) {
							if (direction == "down") {
								$(this)
										.addClass(
												"animated "
														+ $(this).data(
																"animation"));

							}
						}, {
							offset : '90%'
						}).waypoint(
						function(direction) {
							if (direction == "up") {
								$(this)
										.removeClass(
												"animated "
														+ $(this).data(
																"animation"));

							}
						}, {
							offset : $(window).height() + 1
						});
			}

			//End On Scroll Animations

			$(".main-nav a[href]").click(function() {
				var scrollElm = $(this).attr("href");

				$("html,body").animate({
					scrollTop : $(scrollElm).offset().top
				}, 500);

				$(".main-nav a[href]").removeClass("active");
				$(this).addClass("active");
			});

			if ($(window).width() > 1000 && !Modernizr.touch) {
				var options = {
					$menu : ".main-nav",
					menuSelector : 'a',
					panelSelector : 'section',
					namespace : '.panelSnap',
					onSnapStart : function() {
					},
					onSnapFinish : function($target) {
						$target.find('input:first').focus();
					},
					directionThreshold : 50,
					slideSpeed : 200
				};
				$('body').panelSnap(options);

			}

			$(".colorBg a[href]").click(function() {
				var scrollElm = $(this).attr("href");

				$("html,body").animate({
					scrollTop : $(scrollElm).offset().top
				}, 500);

				return false;
			});

		});
	</script>


</body>
</html>